<style scoped lang="scss">
.list {
  dl {
    display: flex;
    padding: 10px;
    dt {
      width: 50px;
      height: 100px;
      img {
        width: 50px;
        height: 50px;
      }
      margin: 0 10px;
    }
    dd {
      .name {
        font-size: 20px;
        font-weight: 800;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>

<template>
  <van-nav-bar v-if="id" :title="(id as string)" left-arrow @click-left="$router.back()" />
  <h1>{{ id }}</h1>
  <van-cell title="全部日期" :value="date" @click="show = true" />
  <van-notice-bar
          :scrollable="false"
          text="8:30放号源,是否有号以医院实际排班为准"
        />
  <div>
    <van-tabs v-model:active="active" swipeable title-active-color="green">
      <van-tab title="周一(有号)">
        
        <div class="list">
          <dl v-for="(item, index) in listData.slice(2,5)" :key="index" :v="item">
            <dt>
              <img :src="item.doctorimage" alt="" />
            </dt>
            <dd>
              <div class="name">
                <div>{{ item.doctorname }}</div>

                <span style="font-size: 15px">{{ item.doctorstate }}</span>
                <span style="position: absolute; right: 10px">
                  <van-button
                    round
                    type="success"
                    style="width: 80px; height: 35px"
                    @click="handRDoctor(item)"
                    >去挂号</van-button
                  >
                </span>
              </div>

              <div style="font-size: 14px">{{ item.doctoradministre }}</div>
              <div>擅长：{{ item.socoadmin }}</div>
            </dd>
          </dl>
        </div>
      </van-tab>
      <van-tab title="周二(无号)" disabled>
        
      </van-tab>
      <van-tab title="周三(有号)">
         <div class="list">
          <dl v-for="(item, index) in listData.slice(0,2)" :key="index" :v="item">
            <dt>
              <img :src="item.doctorimage" alt="" />
            </dt>
            <dd>
              <div class="name">
                <div>{{ item.doctorname }}</div>

                <span style="font-size: 15px">{{ item.doctorstate }}</span>
                <span style="position: absolute; right: 10px">
                  <van-button
                    round
                    type="success"
                    style="width: 80px; height: 35px"
                    @click="handRDoctor(item)"
                    >去挂号</van-button
                  >
                </span>
              </div>

              <div style="font-size: 14px">{{ item.doctoradministre }}</div>
              <div>擅长：{{ item.socoadmin }}</div>
            </dd>
          </dl>
        </div>
      </van-tab>
      <van-tab title="周四(有号)">
         <div class="list">
          <dl v-for="(item, index) in listData.slice(5,9)" :key="index" :v="item">
            <dt>
              <img :src="item.doctorimage" alt="" />
            </dt>
            <dd>
              <div class="name">
                <div>{{ item.doctorname }}</div>

                <span style="font-size: 15px">{{ item.doctorstate }}</span>
                <span style="position: absolute; right: 10px">
                  <van-button
                    round
                    type="success"
                    style="width: 80px; height: 35px"
                    @click="handRDoctor(item)"
                    >去挂号</van-button
                  >
                </span>
              </div>

              <div style="font-size: 14px">{{ item.doctoradministre }}</div>
              <div>擅长：{{ item.socoadmin }}</div>
            </dd>
          </dl>
        </div>
      </van-tab>
      <van-tab title="周五(有号)">
         <div class="list">
          <dl v-for="(item, index) in listData.slice(1,4)" :key="index" :v="item">
            <dt>
              <img :src="item.doctorimage" alt="" />
            </dt>
            <dd>
              <div class="name">
                <div>{{ item.doctorname }}</div>

                <span style="font-size: 15px">{{ item.doctorstate }}</span>
                <span style="position: absolute; right: 10px">
                  <van-button
                    round
                    type="success"
                    style="width: 80px; height: 35px"
                    @click="handRDoctor(item)"
                    >去挂号</van-button
                  >
                </span>
              </div>

              <div style="font-size: 14px">{{ item.doctoradministre }}</div>
              <div>擅长：{{ item.socoadmin }}</div>
            </dd>
          </dl>
        </div>
      </van-tab>
      <van-tab title="周六(无号)" disabled>
        
      </van-tab>
      <van-tab title="周日(无号)" disabled>
        
      </van-tab>
    </van-tabs>

    <van-calendar v-model:show="show" @confirm="onConfirm" position="top" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { doctorState } from '@/interface/index'
import axios from 'axios'
const date = ref('')
const show = ref(false)
const route = useRoute()
const router=useRouter()
const id  =route.params.id
const active = ref(0)
const listData = ref<doctorState[]>([])
const getData = async () => {
  const res = await axios.get('/api/doctor/list', {
    params: {
      pageCode: '',
      pageSize: '',
      admin: id,
    },
  })
  listData.value = res.data.data
}
getData()

const formatDate = (date: any) => {
  return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
}
const onConfirm = (value:string) => {
  show.value = false
  date.value = formatDate(value)
}


const handRDoctor = (item: doctorState) => {
  router.push({
    path: `/RDoctor/${item.doctorid}`,
  })
}
</script>
